<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>

<body>
    <input type="text" id="input" placeholder="输入消息">
    <button id="sendMsg">发送消息</button>
    <p id="result"></p>

    <script>
        const ws = new WebSocket('ws://localhost:3001');

        ws.onopen = () => {
            ws.send('Hello Server!');
        };

        ws.onmessage = (event) => {
            document.getElementById('result').innerHTML = event.data;
        };

        ws.onclose = () => {
            console.log('Disconnected from the server');
        };

        // 向服务器发送信息
        document.getElementById("sendMsg").onclick = () => {
            const message = document.getElementById("input").value;
            ws.send(message)
        };
    </script>
</body>

</html>